<template>
  <div class="container" :class="`sys-style-${systemStyle}`">
    <div class="container-header">
      <div class="tab-title">
        <div class="tab-title-triangle"></div>
        <p>申诉记录表</p>
      </div>
      <t-tabs v-model="type" @change="handleChangeTab">
        <!--<t-tab-panel value="default" label="申诉记录表" :destroy-on-hide="true" />-->
      </t-tabs>
    </div>
    <div class="container-content">
      <info v-if="type === 'info'" @refresh="handleRefresh"></info>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ChartLineData1Icon, ServerIcon } from 'tdesign-icons-vue-next';
import { computed, onMounted, ref } from 'vue';

import { getList } from '@/api/platform/waterquality/appeal/record';
import { useSettingStore } from '@/store';

import Info from './info/index.vue';

const type = ref('info');

const settingStore = useSettingStore();

const systemStyle = computed(() => {
  return settingStore.getThemeStyle;
});

onMounted(() => {
  fetchData();
});
const fetchData = () => {
  getList({
  }).then((res) => {
  });
};

const handleChangeTab = (value: any) => {
  type.value = value;
  fetchData();
};

const handleRefresh = () => {
  fetchData();
};
</script>

<style scoped lang="less">
.container {
  height: 100%;
  width: 100%;
  background: rgb(255, 255, 255);

  .container-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #e7e7e7;
    :deep(.t-tabs__nav-container.t-is-top::after) {
      display: none;
    }
  }
  .tab-title {
    height: 48px;
    width: 240px;
    display: flex;
    align-items: center;
    padding-left: 14px;
    padding-right: 14px;
    background-size: 100% 100%;
    > .tab-title-triangle {
      width: 10px;
      height: 12px;
      margin-right: 14px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    > p {
      color: white;
      font-family: YouSheBiaoTiHei;
      font-size: 24px;
      line-height: 24px;
    }
  }
  &.sys-style-light .tab-title {
    background-image: url('@/assets/title-tag-flag2-blue.png');
    > .tab-title-triangle {
      background-image: url('@/assets/triangle-light.svg');
    }
  }
  &.sys-style-red .tab-title {
    background-image: url('@/assets/title-tag-flag2-red.png');
    > .tab-title-triangle {
      background-image: url('@/assets/triangle-red.svg');
    }
  }
  &-content {
    width: 100%;
    height: calc(100% - 56px - var(--td-comp-margin-xxl) - 48px - 20px);
    .statistic {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 16px 0 0 0;
      padding: 0 24px;
      .status-bar {
        display: flex;
        padding: 16px;
        border-radius: 4px;
        align-items: center;
        margin-left: 16px;
        &:first-child {
          margin-left: 0;
        }
        &-icon-block {
          border-radius: 6px;
          padding: 12px;
          color: white;

          svg {
            font-size: 32px;
            line-height: 32px;
          }
        }
        &-data {
          margin-left: 20px;
          &-title {
            font-size: 16px;
            line-height: 16px;
            margin-bottom: 10px;
          }
          &-content {
            display: flex;
            align-items: end;

            &-number {
              line-height: 28px;
              font-size: 28px;
            }
            &-measure {
              margin-left: 5px;
              font-size: 16px;
              line-height: 16px;
            }
          }
        }
      }
    }
  }
  :deep(.t-table__header > tr > th) {
    background: var(--td-brand-color-2);
  }
}
</style>
